import React from 'react'
import {withRouter} from 'react-router'
import BaseComponent from 'basecomponent'
import classNames from 'classnames'
import icons from 'icons'
import Button from "button"
import Dropzone from 'react-dropzone'
import './style.scss'
import {Form, Select, Checkbox} from 'antd'
const FormItem = Form.Item
import api from 'apis'
const Option = Select.Option
import AntTable from 'anttable'
import appConfig from 'config'
import {USER_KEY} from 'auth'
import store from 'store'
import moment from 'moment'
import UploadMusicModal from 'uploadMusicModal'

class ReviseCompany extends BaseComponent {
  constructor() {
    super(...arguments)
    const location = this.props.location
    this.state = {
      universityID: location.query.Id ?  parseInt(location.query.Id) : 1,
      isRevise: location.state.revise ? location.state.revise : false,
      universityData: {},
      universityLogoImg: '',
      universityLogoPreview: '',
      showCheckbox: false,
      sightsData: [],
      checkSightsIndex: [],
      currentPage: 1,
      pageSize: 5,
      provinceData: [],
      cityData: [],
      collegeData: [],
      qualityData: [],
      qualityCurrentPage: 1,
      qualityPageSize: 5,
      musicData: [{
        Id: '-',
        Name: '添加',
        PlayTimes:'-',
        Duration:'-',
        updateTime:'-'
      }],
      showModal: false
    }
    store.set('currentUId', location.query.Id ? location.query.Id : 1)
  }

  componentDidMount() {
    const {universityID} = this.state
    this.getUniversityDetail(universityID)
    this.getCollegeList(universityID)
    this.getQualityList(universityID)
  }

  getUniversityDetail(id) {
    let uid = id ? id : store.get('currentUId')
    this.getUDetailRP = api.university.getUniversityDetail(uid)
    this.registerRequest(this.getUDetailRP.request)
    this.getUDetailRP.promise
      .then((res) => {
        res.Data && this.setState({universityData: res.Data})
        res.Data && this.mapUniversityData(res.Data)
        if(res.Data.Music){
          console.log(res.Data.Music)
          res.Data.Music.Id && this.getCommentList(res.Data.Music.Id)
          this.setState({musicData: [res.Data.Music]})
        }
      })
  }

  getCommentList(id){
    this.CommentListRP && this.CommentListRP.request.abort();
    this.CommentListRP = api.music.getCommentList(id);
    this.registerRequest(this.CommentListRP.request);
    this.CommentListRP.promise
      .then((res)=>{
        let data = res.Data||[]
        this.setState({commentList: data, paginationCommentList: data.slice(0, 5)});
      })
      .catch((err)=>{
        alert(err.msg)
      })
  }

  handleMusicView(musicView) {
    const {musicData,universityData} = this.state
    musicData[0].Id = musicView.Id
    musicData[0].Name = musicView.Name
    musicData[0].updateTime = moment(new Date()).format('YYYY.MM.DD hh:mm')
    let reviseUniversity = Object.assign({},universityData,{Music:{Id:musicView.Id}})
    this.setState({musicData: musicData})
    this.RUniversityRp && this.RUniversityRp.request.abort();
    this.RUniversityRp = api.university.reviseUniversity(universityData.Id , reviseUniversity);
    this.registerRequest(this.RUniversityRp.request);
    this.RUniversityRp.promise
      .then((res) => {
        res.Data&&this.setState({universityData:res.Data})
      })
  }

  handleDeleteMusic(){
    let universityData = this.state.universityData
    let resetData = [{
      Id: '-',
      Name: '添加',
      PlayTimes:'-',
      Duration:'-',
      updateTime:'-'
    }]
    if(universityData && universityData.hasOwnProperty('Music')){
      delete universityData.Music
      this.RUniversityRp && this.RUniversityRp.request.abort();
      this.RUniversityRp = api.university.reviseUniversity(universityData.Id , universityData);
      this.registerRequest(this.RUniversityRp.request);
      this.RUniversityRp.promise
        .then((res) => {
          res.Data&&this.setState({universityData:res.Data, musicData: resetData})
          alert('删除成功')
        })
        .catch((err)=>{
          alert(err.msg)
        })
    } else {
      alert('请添加音频数据')
    }
  }

  getCollegeList(id) {
    let uid = id ? id : store.get('currentUId')
    this.getCListRP && this.getCListRP.request.abort()
    this.getCListRP = api.university.getCollegeList(uid)
    this.registerRequest(this.getCListRP.request)
    this.getCListRP.promise
      .then((res) => {
        res.Data && this.setState({collegeData: res.Data})
      })
      .catch((err) => {
        console.log('err', err)
      })
  }

  topCollege(text, record) {
    let collegeData = {}
    if(record.Order && record.Order === 1){
      collegeData = Object.assign({}, record, {Order: 0})
    }else{
      collegeData = Object.assign({}, record, {Order: 1})
    }
    this.reviseCollegeRP && this.reviseCollegeRP.request.abort()
    this.reviseCollegeRP = api.university.reviseCollege(collegeData.Id, collegeData)
    this.registerRequest(this.reviseCollegeRP.request)
    this.reviseCollegeRP.promise
      .then((res) => {
        alert('成功')
        this.getCollegeList(this.state.universityID)
      })
      .catch((err) => {
        alert(err.msg)
      })
  }
  watchCollege(text, record) {
    this.props.router.push({
      pathname: 'home/revise/college',
      query: {Id: record.Id},
      state: {
        revise: false,
      }
    })
  }

  mapUniversityData(detail) {
    let tags = detail.Tags.split('|')
    this.props.form.setFieldsValue({
      Name: detail.Name,
      Introduce: detail.Introduce,
      levelF:tags[0] ? tags[0]:'',
      batch:tags[1] ? tags[1]:'',
      category:tags[3] ? tags[3]:'',
    })
    this.getProvinceInfo(parseInt(detail.Addr / 1000) * 1000, detail.Addr)
    this.setState({
      universityLogoImg: `${appConfig.apiHost}/File/?pid=${detail.Image}&key=${store.get(USER_KEY)}`,
      sightsData: detail.Pics && detail.Pics.split('|').map((i) => {
        return {pic: i}
      }),
    })
  }

  getProvinceInfo(Pid, Cid) {
    this.getProviceRP = api.address.getProvince()
    this.registerRequest(this.getProviceRP.request)
    this.getProviceRP.promise
      .then((res) => {
        res.Data && this.setState({provinceData: res.Data})
        this.getCityInfo(Pid, Cid)
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  getCityInfo(Pid, Cid) {
    this.getCityRP && this.getCityRP.request.abort()
    this.getCityRP = api.address.getCity(Pid)
    this.registerRequest(this.getCityRP.request)
    this.getCityRP.promise
      .then((res) => {
        res.Data && this.setState({cityData: res.Data})
        res.Data && this.props.form.setFieldsValue({
          AddrP: Pid.toString(),
          AddrC: Cid.toString(),
        })
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  handleProvinceSelect(value, option) {
    if (value) {
      this.getCityRP && this.getCityRP.request.abort()
      this.getCityRP = api.address.getCity(value)
      this.registerRequest(this.getCityRP.request)
      this.getCityRP.promise
        .then((res) => {
          res.Data && this.setState({cityData: res.Data, defaultProvince: value})
          res.Data && this.props.form.setFieldsValue({
            AddrC: res.Data[0].Id.toString()
          })
        })
        .catch((err) => {
          alert(err.msg)
        })
    }

  }

  handleLogoFileSelect(files) {
    const {universityData} = this.state
    let file = files[0]
    if (file) {
      this.uploadLogoRP && this.uploadLogoRP.request.abort()
      this.uploadLogoRP = api.file.uploadFile(file)
      this.registerRequest(this.uploadLogoRP.request)
      this.uploadLogoRP.promise
        .then((res) => {
          this.setState({
            universityLogoImg: res.Data || '', universityData: Object.assign({},
              universityData, {Image: res.Data || ''})
          })
        })
        .catch((err) => {
          alert(err.msg)
        })
    }
  }

  handleSightsFileSelect(files) {
    let file = files[0]
    let list = this.state.sightsData || []
    console.log('files', files)
    if (file) {
      list.push(file)
      this.setState({sightsData: list})
    }
  }

  uploadSightsFiles(i) {
    const {sightsData} = this.state
    let index = i
    if (index > -1) {
      let postData = sightsData[index]
      if (postData instanceof File) {
        this.uploadRP && this.uploadRP.request.abort()
        this.uploadRP = api.file.uploadFile(postData)
        this.registerRequest(this.uploadRP.request)
        this.uploadRP.promise
          .then((res) => {
            sightsData[index] = {pic: res.Data}
            this.setState({sightsData: sightsData}, () => {
              if (index < sightsData.length) {
                this.uploadSightsFiles(index + 1)
              } else {
                this.uploadSightsFiles(-1)
              }
            })
          })
          .catch((err) => {
            if (index < sightsData.length) {
              this.uploadSightsFiles(index + 1)
            } else {
              this.uploadSightsFiles(-1)
            }
          })
      } else {
        if (index < sightsData.length) {
          this.uploadSightsFiles(index + 1)
        } else {
          this.uploadSightsFiles(-1)
        }
      }
    } else {
      this.uploadUniversityData()
    }
  }

  uploadUniversityData() {
    const {universityData, sightsData} = this.state
    let picStr = ''
    sightsData.length > 0 && sightsData.forEach(function (item, index) {
      if (index === 0 || index === sightsData.length) {
        picStr = picStr + item.pic
      } else {
        picStr = picStr + '|' + item.pic
      }
    })
    universityData.Pics = picStr
    this.addUniversityRP && this.addUniversityRP.request.abort()
    this.addUniversityRP = api.university.reviseUniversity(universityData.Id, universityData)
    this.registerRequest(this.addUniversityRP.request)
    this.addUniversityRP.promise
      .then((res) => {
        res.Data && this.setState({universityData: res.Data})
        alert("成功")
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  handleSubmit(e) {
    e.preventDefault()
    const{provinceData,universityData} = this.state
    this.props.form.validateFields((err, values) => {
      if (!err) {
        universityData.Name = values.Name
        universityData.Addr = values.AddrC
        universityData.Introduce = values.Introduce
        universityData.TotalPlayTimes = values.TotalPlayTimes
        universityData.Timestamp = 0
        let addr = ''
        provinceData.map((item)=>{
          if(values.AddrP && parseInt(values.AddrP) === item.Id){
            addr = item.Name
          }
        })
        universityData.Tags = `${values.levelF ? values.levelF : ''}|${values.batch ? values.batch : ''}|${addr}|${values.category ? values.category : ''}`
        this.addUniversityRP && this.addUniversityRP.request.abort()
        this.addUniversityRP = api.university.reviseUniversity(universityData.Id, universityData)
        this.registerRequest(this.addUniversityRP.request)
        this.addUniversityRP.promise
          .then((res) => {
            res.Data && this.setState({universityData: res.Data})
            if(res.State === 0){
              alert('修改成功')
            }
          })
          .catch((err) => {
            alert(`错误：${err.statusCode}`)
          })
      }
    })
  }

  getLogoImgDiv() {
    const {universityLogoImg, universityLogoPreview} = this.state
    if (universityLogoPreview.length > 0) {
      return <img className={'preview-img'} src={universityLogoPreview}/>
    } else {
      if (universityLogoImg.length > 0) {
        return <img className={'preview-img'}
                    src={`${appConfig.apiHost}/File/?pid=${universityLogoImg}&key=${store.get(USER_KEY)}`}/>
      } else {
        return <div className={'default-wrapper'}>
          <img className={'image-default'} src={icons.uploadImg}/>
          <span>点击添加LOGO</span>
        </div>
      }
    }
  }

  getQualityList(uid) {
    this.qualityRP && this.qualityRP.request.abort()
    this.qualityRP = api.quality.getQualityList(uid)
    this.registerRequest(this.qualityRP.request)
    this.qualityRP.promise
      .then((res) => {
        let data = res.Data || []
        let qualityData = data.map((item) => {
          let updateTime = moment(new Date(item.UpdateTime)).format('YYYY-MM-DD HH:mm')
          return Object.assign({}, item, {UpdateTime: updateTime})
        })
        this.setState({qualityData: qualityData})
      })
      .catch((err) => {
        alert(err.msg)
      })
  }
  deleteQuality(qid) {
    this.deleteQualityRP && this.deleteQualityRP.request.abort()
    this.deleteQualityRP = api.quality.deleteQuality(qid)
    this.registerRequest(this.deleteQualityRP.request)
    this.deleteQualityRP.promise
      .then((res) => {
        alert(res)
        this.getQualityList(this.state.universityID)
      })
      .catch((err) => {
        alert(err.msg)
      })
  }
  deleteCollege(text,record){
    let data = this.state.collegeData
    this.deleteURP = api.university.deleteCollege(record.Id);
    this.registerRequest(this.deleteURP.request);
    this.deleteURP.promise
      .then((res) => {
        if(res === 'delete success'){
          data.forEach((item, index) => {
            if(item.Id === record.Id){
              data.splice(index,1)
              this.setState({
                collegeData: data
              })
              alert('删除成功')
            }
          })
        }else{
          alert('删除失败')
        }
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  render() {
    const {wrapperName, buttonWrapperName, clickBack, children} = this.props
    const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form
    const {
      universityData, sightsData, currentPage, pageSize, showCheckbox
      ,provinceData, cityData, collegeData, qualityData, qualityCurrentPage,
      qualityPageSize,showModal, musicData
    } = this.state

    const columns = [{
      title: '编号',
      dataIndex: 'Id',
      key: 'Id',
    }, {
      title: '学院名称',
      dataIndex: 'Name',
      key: 'Name'
    },
      {
        title: '时长',
        dataIndex: 'TotalDuration',
        key: 'TotalDuration'
      },
      {
        title: '上传时间',
        dataIndex: 'UpdateTime',
        key: 'UpdateTime',
        render: (text)=>{
          return <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
        }
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
          <a onClick={()=>{this.topCollege(text,record)}}>
            {record.Order && record.Order === 1 ? '取消置顶' : '置顶'}
          </a>
            <span className="ant-divider"/>
             <a onClick={() => {
               this.watchCollege(text, record)
             }}>查看</a>
          <span className="ant-divider"/>
          <a onClick={()=>{this.deleteCollege(text,record)}}>
            删除
          </a>
        </span>
        ),
      }]

    const voiceColumns = [{
      title: '编号',
      dataIndex: 'Id',
      key: 'Id',
    }, {
      title: '音频名称',
      dataIndex: 'Name',
      key: 'Name',
    }, {
      title: '播放量',
      dataIndex: 'PlayTimes',
      key: 'PlayTimes',
    }, {
      title: '时长',
      dataIndex: 'Duration',
      key: 'Duration',
    }, {
      title: '上传时间',
      dataIndex: 'updateTime',
      key: 'updateTime'
    },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
             <a onClick={(text,record) => {
               this.setState({showModal:true})
             }}>上传</a>
            <span className="ant-divider"/>
          <a href={`${appConfig.apiHost}/File/?pid=${text.Url}&key=${store.get(USER_KEY)}`}
             download={`${text.Name}.mp3`}>
            下载
          </a>
              <span className="ant-divider"/>
          <a onClick={() => {
            this.handleDeleteMusic()
          }}>删除</a>
        </span>
        ),
      }
    ]

    const qualityColumns = [{
      title: '编号',
      dataIndex: 'Id',
      key: 'Id',
    }, {
      title: '名称',
      dataIndex: 'Name',
      key: 'Name'
    },
      {
        title: '播放量',
        dataIndex: 'TotalPlayTimes',
        key: 'TotalPlayTimes'
      },
      {
        title: '时长',
        dataIndex: 'Music.Duration',
        key: 'Duration'
      },
      {
        title: '上传时间',
        dataIndex: 'UpdateTime',
        key: 'UpdateTime',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
             <a onClick={() => {
               this.props.router.push({
                 pathname: '/home/revise/quality',
                 query: {Id: record.Id},
                 state: {uid: universityData.Id,
                   cid: -1,
                   from:'revise'}
               })
             }}>查看</a>
            <span className="ant-divider"/>
            <a href={`${appConfig.apiHost}/File/?pid=${record.Music.Id}&key=${store.get(USER_KEY)}`}
               download={`${text.Name}.mp3`}>下载</a>
            <span className="ant-divider"/>
            <a onClick={() => {
              this.deleteQuality(record.Id)
            }}>删除</a>
        </span>
        ),
      }]

    const hoverContent = (
      <div className={'hover-wrapper'} style={
        {
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          width: '100%'
        }
      }>
        <Button className={'benke-btn'} style={{
          width: '80%',
          border: 'none',
          backgroundColor: '#ff595f',
          margin: 'auto',
          marginBottom: '8px'
        }} onClick={() => {
          if (!(universityData.Id === -1 || typeof universityData.Id === 'undefined')) {
            this.props.router.push({pathname: '/home/add/college',query:{id:-1,category:0},state:{uid:universityData.Id,from:'revise'}})
          } else {
            alert('请先添加学校')
          }
        }}>本科学院</Button>
        <Button className={'shuoshi-btn'} style={{
          width: '80%',
          border: 'none',
          backgroundColor: '#ff595f',
          margin: 'auto',
          marginTop: '0'
        }} onClick={() => {
          if (!(universityData.Id === -1 || typeof universityData.Id === 'undefined')) {
            this.props.router.push({
              pathname: '/home/add/college',
              query: {Id: -1, category: 1},
              state: {uid: universityData.Id,from:'revise'}
            })
          } else {
            alert('请先添加学校')
          }
        }}>硕士学院</Button>
      </div>
    )

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
      }),
    }
    const qualityRowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
      }),
    }
    const self = this
    return (
      children ? <div>{children}</div> :
        <div className={''} style={{width: "100%", height: '100%'}}>
          <div className={classNames('company-wrapper', wrapperName)}>
            <div className={classNames('button-wrapper', buttonWrapperName)}>
              <Button className={'back-button'} onClick={() => {
                  this.props.router.goBack()
              }}>{Button.AddOn({
                src: icons.backIcon, style: {
                  width: '1rem',
                  height: '1rem',
                  display: 'block',
                  backgroundRepeat: 'no-repeat',
                }
              })}</Button>
              <div className={'add-name'}>
                修改学校
              </div>
            </div>
            <Form onSubmit={this.handleSubmit.bind(this)} hideRequiredMark={true}>

              <div className={'body-top'}>
                <Dropzone className={'image-drop-zone'}
                          onDrop={this.handleLogoFileSelect.bind(this)}
                          accept={'image/*'}
                          multiple={false}>
                  {this.getLogoImgDiv()}
                </Dropzone>
                <div className={'body-top-middle'}>
                  <div className={'option-wrapper'}>
                    <div className={'option-title'}>学校名称</div>
                    <FormItem>
                      {getFieldDecorator('Name', {initialValue: universityData.Name})(
                        <input className={'option-input'}
                               type={'text'}/>
                      )}
                    </FormItem>
                  </div>
                  <div className={'option-wrapper'}>
                    <div className={'option-title'}>学校地址</div>
                    <FormItem>
                      {getFieldDecorator('AddrP')(
                        <Select className={'province-select select-margin'}
                                onSelect={this.handleProvinceSelect.bind(this)}
                                notFoundContent={'-'}>
                          {provinceData.map(function (item, index) {
                            return <Option key={item.Id.toString()} value={item.Id.toString()}>{item.Name}</Option>
                          })}
                        </Select>
                      )
                      }
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('AddrC')(
                        <Select className={'city-select'}
                                notFoundContent={'-'}
                        >
                          {
                            cityData && cityData.map(function (item, index) {
                              return <Option key={item.Id.toString()} value={item.Id.toString()}>{item.Name}</Option>
                            })
                          }
                        </Select>
                      )
                      }
                    </FormItem>
                  </div>
                  <div className={'option-wrapper'} style={{marginBottom: '0'}}>
                    <div className={'option-title'}>播放次数</div>
                    <FormItem>{
                      getFieldDecorator('TotalPlayTimes', {initialValue: universityData.TotalPlayTimes})(
                        <input className={'option-input'} type={'number'}/>
                      )
                    }</FormItem>
                  </div>
                </div>
                <div className={'body-top-end'}>
                  <div className={'option-wrapper'}>
                    <div className={'option-title'}>学校级别</div>
                    <FormItem>{
                      getFieldDecorator('levelF')(
                        <Select className={'level-first-select big'}>
                          <Option value={'双一流'}>双一流</Option>
                          <Option value={'985'}>985</Option>
                          <Option value={'211'}>211</Option>
                        </Select>
                      )
                    }</FormItem>
                  </div>
                  <div className={'option-wrapper'}>
                    <div className={'option-title'}>学校批次</div>
                    <FormItem>{
                      getFieldDecorator('batch')(
                        <Select className={'batch-select big'}>
                          <Option value={'本科'}>本科</Option>
                          <Option value={'专科'}>专科</Option>
                        </Select>
                      )
                    }
                    </FormItem>
                  </div>
                  <div className={'option-wrapper'} style={{marginBottom: '0'}}>
                    <div className={'option-title'}>学校类别</div>
                    <FormItem>{
                      getFieldDecorator('category')(
                        <Select className={'category-select big'}>
                          <Option value={'综合'}>综合</Option>
                          <Option value={'工科'}>工科</Option>
                          <Option value={'医学'}>医学</Option>
                          <Option value={'农业'}>农业</Option>
                          <Option value={'体育'}>体育</Option>
                        </Select>
                      )
                    }</FormItem>
                  </div>
                </div>
              </div>

              <div className={'body-middle'}>
                <div className={'title-wrapper'}>
                  <span className={'title-bar'}/>
                  <span className={'title-text'}>学校简介</span>
                  <Button className={'title-btn-save'} buttonType={'submit'} onClick={() => {
                  }}>保存</Button>
                </div>
                <FormItem>{
                  getFieldDecorator('Introduce', {initialValue: universityData.Introduce})(
                    <textarea className={'company-intro'}/>
                  )
                }</FormItem>
                <div className={'title-wrapper'}>
                  <span className={'title-bar'}/>
                  <span className={'title-text'}>学校风景</span>
                  <Button className={'title-btn-more'} buttonType={"button"} onClick={() => {
                    if (sightsData && sightsData.length > 0) {
                      this.setState({showCheckbox: !showCheckbox})
                    }
                  }}>更多</Button>
                  <Button className={'title-btn-save'}
                          buttonType={'button'}
                          onClick={() => {

                            if (showCheckbox) {
                              let data = []
                              sightsData.map(function (item, index) {
                                if (!item.checked)
                                  return data.push(item)
                              })
                              if (data.length === 0) {
                                this.setState({showCheckbox: false, sightsData: data})
                              } else {
                                this.setState({sightsData: data})
                              }
                            } else {
                              this.uploadSightsFiles(0)
                            }
                          }}>{showCheckbox ? '删除' : '保存'}</Button>
                </div>
                <div className={'sights-wrapper'}>
                  <ul className={'sights-ul'}>
                    {
                      sightsData && sightsData.map(function (item, index) {
                        return <li className={'sights-li'}>
                          {showCheckbox && <Checkbox className={'sights-check-box'} value={index} checked={item.checked}
                                                     onChange={(e) => {
                                                       let index = parseInt(e.target.value)
                                                       let data = sightsData.map(function (i, d) {
                                                         return d === index ? Object.assign(i, {checked: e.target.checked}) : i
                                                       })
                                                       self.setState({sightsData: Object.assign(sightsData, data)})
                                                     }
                                                     }/>}
                          <img className={'sights-img'} src={typeof item.pic === 'string' ?
                            `${appConfig.apiHost}/File/?pid=${item.pic}&key=${store.get(USER_KEY)}` :
                            item.preview} alt={'Opps!'}/>
                        </li>
                      })
                    }
                  </ul>
                  <Dropzone className={'image-drop-zone'}
                            onDrop={this.handleSightsFileSelect.bind(this)}
                            action={'http://101.201.51.208:9528/File'}
                            accept={'image/*'}
                            multiple={false}>
                    <div className={'default-wrapper'}>
                      <img className={'image-default'} src={icons.uploadImg}/>
                      <span>点击添加图片</span>
                    </div>
                  </Dropzone>
                </div>
              </div>
            </Form>

            <div className={'body-end'} style={{height: '25rem'}}>
              <div className={'title-wrapper'}>
                <span className={'title-bar'}/>
                <span className={'title-text'}>招生学院</span>
                {/*<Popover trigger={'hover'} title={'添加'} content={hoverContent}>*/}
                  <Button className={'title-btn-more'} onClick={() => {
                    if (!(universityData.Id === -1 || typeof universityData.Id === 'undefined')) {
                      this.props.router.push({pathname: '/home/add/college',query:{Id:-1},
                        state:{uid:universityData.Id,from:'revise'}})
                    } else {
                      alert('请先添加学校')
                    }
                  }}>添加</Button>
                {/*</Popover>*/}
                <Button className={'title-btn-save'} onClick={() => {
                }}>删除</Button>
              </div>
              <AntTable columns={columns} data={collegeData} rowSelection={rowSelection}
                        pagination={true} currentPage={currentPage} pageSize={pageSize}
                        onChange={(pagination) => {
                          this.setState({
                            currentPage: pagination.current,
                            pageSize: pagination.pageSize,
                          })
                        }}
              />
            </div>

            <div className={'body-end voice'}>
              <div className={'title-wrapper'}>
                <span className={'title-bar'}/>
                <span className={'title-text'}>学校音频</span>
              </div>
              <AntTable columns={voiceColumns} data={musicData}  pagenation={false}/>
            </div>

            <div className={'body-end quality'} style={{height: '25rem', marginTop:'1rem'}}>
              <div className={'title-wrapper'}>
                <span className={'title-bar'}/>
                <span className={'title-text'}>付费列表</span>
                <Button className={'title-btn-more'} onClick={() => {
                  this.props.router.push({
                    pathname: '/home/add/quality',
                    query: {Id: -1},
                    state: {uid: universityData.Id,from:'revise'}
                  })
                }}>添加</Button>
                <Button className={'title-btn-save'} onClick={() => {}}>删除</Button>
              </div>
              <AntTable columns={qualityColumns} data={qualityData} rowSelection={qualityRowSelection}
                        pagination={true} currentPage={qualityCurrentPage} pageSize={qualityPageSize}
                        onChange={(pagination) => {
                          this.setState({
                            qualityCurrentPage: pagination.current,
                            qualityPageSize: pagination.pageSize,
                          })
                        }}
              />
            </div>
          </div>
          {showModal && <UploadMusicModal handleSave={(musicView)=>{this.handleMusicView(musicView)}}
                                          hideModal={()=>{this.setState({showModal:false})}}/>}
        </div>
    )
  }
}

module.exports = Form.create()(withRouter(ReviseCompany))
